<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			table{
				text-align: center;
			}
			a{
				text-decoration: none;
				color: #000000;
			}
		</style>
	</head>
	<body>
		<!-- submiit是button的默认值 -->
		<button class="seleAll">全选</button>
		<button class="allDel">批量删除</button>
		<button class="reverse">反选</button>
		<button class="noneSele">全不选</button>
		<button type="button" onclick="add()">添加</button>
		<table border="1" id="mytable" width="700px">
			<thead>
				<tr>
					<th>选择</th>
					<th>序号</th>
					<th>书籍名称</th>
					<th>出版日期</th>
					<th>价格</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<p>
			总价格:￥<span id="span_result"></span>
		</p>
		<script type="text/javascript">
			let books = [
				{id:1,name:'《三国演义》',tdate:'1899-08-09',price:'699.99',count:1},
				{id:2,name:'《水浒传》',tdate:'1863-09-10',price:'699.99',count:1},
				{id:3,name:'《红楼梦》',tdate:'1884-03-12',price:'699.99',count:1},
				{id:4,name:'《西游记》',tdate:'1900-07-28',price:'699.99',count:1}
			]

			//将数组保存到sessionStrage中
			//查看参数有没有
			let data = sessionStorage.getItem("data");
			// console.log(data);
			if(data) {
				//转译处理
				books = JSON.parse(data);
			}else{
				sessionStorage.setItem("data",JSON.stringify(books));
			}
						
			//获取table对象
			let table = document.getElementsByTagName("table")[0];
			let tbody = table.getElementsByTagName("tbody")[0];
			
			//将数组中的值显示在表格中
			function update(){
				
				for(let index in books){
					let item = books[index];
					console.log(typeof(item));
					let tr = document.createElement("tr");
					let chb =`
						<input type="checkbox" name="aa"/>
					`;
					appendTd(tr,chb,true);
					tbody.appendChild(tr);
					
					for(let val in item){
						let text = item[val];
						let isHtml = false;
						//val ==== 书名 就是一个超链接，进行跳转
						if(val === "name"){
							text = `
								<a onclick="edit(${index})">${text}</a>
							`;
							isHtml = true;
						}else if(val === 'count'){
							text = `
								<button type="button" onclick="reduce(${index})">-</button>
								<span>${text}</span>
								<button type="button" onclick="pluscount(${index})">+</button>
							`
							isHtml = true;
						}
						appendTd(tr,text,isHtml);
					}
					let opt =`
						<button>编辑</button>
						<button onclick="del(${index})">删除</button>
					`;
					appendTd(tr,opt,true);
				}
			}
			
			function appendTd(tr,value,isHtml){
				let td = document.createElement("td");
				if(isHtml){
					td.innerHTML = value;
				}else{
					td.innerText = value;
				}
				tr.appendChild(td);
			}
			
			//跳转页面
			function add(){
				location.href = "8-06作业讲解二.html";
				sessionStorage.setItem("item",null);
			}
			
			//加
			function pluscount(index){
				let item = books[index];
				item.count++;
				let node = tbody.childNodes[index + 1];
				let span = node.getElementsByTagName("span")[0];
				span.innerText = item.count;
				getTotal();
			}
			
			//减
			function reduce(index){
				let item = books[index];
				if(item.count === 1){
					return;
				}
				item.count--;
				let node = tbody.childNodes[index + 1];
				let span = node.getElementsByTagName("span")[0];
				span.innerText = item.count;
				getTotal();
			}
			
			//编辑
			function edit(index){
				let item = books[index];
				// item.index = index;
				//你要编辑哪一条，就把哪一条里面的对象，就保存到setItem中
				sessionStorage.setItem("index",index);
				sessionStorage.setItem("item",JSON.stringify(books[index]));
				location.href = "8-06作业讲解二.html";
			}
			
			//删除
			function del(index){
				//删除页面元素
				console.log(index);
				let node = tbody.childNodes[index + 1];
				console.log(node);
				tbody.removeChild(node);
				//删除数组中的数据
				books.splice(index,1);
				//打印数组删除
				console.log(books.toString());
				getTotal();
			}
			
			//点击全选 全部选中
			$(".seleAll").on('click', function() {
				var seleAll = $("input[type='checkbox']")
				seleAll.each(function() {
					seleAll.prop('checked', true)
				})
			})
			// 反选
			$(".reverse").on("click", function() {
				var seleAll = $("input[type='checkbox']")
				seleAll.each(function() {
					this.checked = !this.checked
				})
			})
			
			//全不选
			$(".noneSele").on("click", function() {
				var seleAll = $("input[type='checkbox']")
				seleAll.each(function() {
					seleAll.prop('checked', false)
				})
			})
			//批量删除
			$(".allDel").on("click", function() {
				var allDel = $(":checkbox:checked")
				if (allDel.length > 0) {
					allDel.each(function() {
						$(this).parent().parent().remove()
					})
				} else {
					alert('请选中数据后在删除')
				}
				console.log(getTotal)
				getTotal();
			})
			
			//总价格
			function getTotal(){
				let total = 0;
				//遍历数组
				for(let item of books){
					total += item.price * item.count;
				}
				document.getElementById("span_result").innerText = total;
			}
			update();
			getTotal();
		</script>
	</body>
</html>
